<template>
  <div class="pages_content table">
    <el-container>
      <el-header>
        <breaDcrumb />
      </el-header>
      <el-main>
        <div class="header_right" @click="showCardNav = !showCardNav">
          <div class="title">搜索</div>
          <div>
            <div :class="{ 'arrowTransform': !showCardNav, 'arrowTransformReturn': showCardNav}">
              <i style="margin-right: 5px" class="el-icon-arrow-down"></i>
            </div>
          </div>
        </div>
        <div v-show="showCardNav" class="hr"></div>
        <el-collapse-transition>
          <div v-show="showCardNav">
            <div class="search">
              <span style="display: inline-block;margin-bottom: 10px;">
                <span style="margin-right: 12px;">供应商名称</span>
                <el-input v-model="tableParam.supplierName" style="width: 220px;" clearable />
              </span>
              <span style="margin-left: 24px;">
                <span style="margin-right: 12px;">供应商类别</span>
                <el-select v-model="tableParam.supplierTypeId" style="width: 220px;" placeholder="请选择">
                  <el-option v-for="item in typelist" :key="item.id" :label="item.itemName" :value="item.id"></el-option>
                </el-select>
              </span>
              <span style="margin-left: 24px;">
                <span style="margin-right: 12px;">状态</span>
                <el-select v-model="tableParam.enable" style="width: 220px;" placeholder="请选择">
                  <el-option label="启用" :value="1"></el-option>
                  <el-option label="禁用" :value="0"></el-option>
                </el-select>
              </span>
              <el-button icon="el-icon-search" size="medium" class="bottom_all but1" @click="(tableParam.page = 1), gettableData()">查 询</el-button>
              <el-button size="medium" class="bottom_all_two" style="margin-left:12px;" @click="init()">重 置</el-button>
            </div>
          </div>
        </el-collapse-transition>
        <div class="hr"></div>
        <div class="card" style="padding-top: 10px;">
          <div v-loading="tableLoading" class="card_info" :style="style">
            <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border :data="tableData" stripe style="width:100%" tooltip-effect="dark">
              <template v-for="(item, index2) in table">
                <el-table-column v-if="item.status" :key="index2" :label="item.label" align="center" :width="item.width">
                  <template slot-scope="scope">
                    <el-link v-if="item.label == '协作单位'" class="table_link" :underline="false" @click="chengecollabor(scope.row)">协作单位</el-link>
                    <span v-if="item.label == '状态'">{{scope.row.authStatus==0?'待审核':scope.row.authStatus==1?'通过':'未通过'}}</span>
                    <el-link v-if="scope.row.authStatus==0&&item.label == '操作'" class="table_link" :underline="false" @click="updateDate(scope.row,1)">通过</el-link>
                    <el-link v-if="scope.row.authStatus==0&&item.label == '操作'" class="table_link" :underline="false" @click="updateDate(scope.row,2)">不通过</el-link>
                    <span v-if="item.label !== '操作' && item.label !== '状态'&&item.label !== '协作单位'">{{ scope.row[item.prop] }}</span>
                  </template>
                </el-table-column>
              </template>
            </el-table>
          </div>
          <div class="card_bottom">
            <div class="card_bottom_left">
              <div class="top_page_totle">总共{{ total }}条</div>
              <el-pagination :current-page.sync="tableParam.page" :page-size="tableParam.pageSize" layout="prev, pager, next, jumper" :total="total" @current-change="gettableData()"></el-pagination>
            </div>
            <div>
              <el-button size="mini" icon="el-icon-refresh-right" class="bottom_all_two" @click="gettableData">刷新</el-button>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
    <el-dialog v-dialogDrag :visible.sync="collaborDialog" width="680px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">协作单位</span>
      <div>
        <el-button size="mini" class="bottom_all" style="margin-left: 0;" @click="addcollabor()">
          <i class="icon iconfont iconicon_button_add" style="font-size: 12px;"></i>
          添加
        </el-button>
      </div>
      <div class="dialoginfo">
        <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="collaborData" tooltip-effect="dark">
          <el-table-column label="协作单位名称" align="center" prop="name"></el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="collaborDialog=false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import mixin from "@/mixins/ICPSmixin.js";
import { queryPage, saveOrUpdate } from "@/api/GHnumber/cooplevel.js";
export default {
  mixins: [mixin],
  data() {
    return {
      /*表格增删改查及下载接口*/
      queryPage: queryPage,
      /*表格数据*/
      table: [
        { label: "供应商ID", width: "", prop: "code", status: true },
        { label: "供应商名称", width: "", prop: "supplierName", status: true },
        { label: "供应商类别", width: "", prop: "supplierType", status: true },
        { label: "协作单位", width: "", prop: "", status: true },
        { label: "合作等级", width: "", prop: "gradeName", status: true },
        { label: "状态", width: "", prop: "enable", status: true },
        { label: "操作", width: "250", prop: "", status: true },
      ],
      /*表单页类型，0为无树状，1为有树状，有树状在el-main加上display:flex*/
      pagesType: 0,
      /*添加表单数据*/
      rules: {
        name: [
          { required: true, message: "请输入供应商名称", trigger: "blur" },
        ],
        typeId: [
          { required: true, message: "请选择供应商类别", trigger: "change" },
        ],
        gradeId: [
          { required: true, message: "请选择合作等级", trigger: "change" },
        ],
      },
      typelist: [
        { itemName: "协外", id: "1" },
        { itemName: "外协", id: "0" },
        { itemName: "不知道", id: "2" },
      ],
      gradelist: [
        { itemName: "一级", id: "1" },
        { itemName: "二级", id: "0" },
        { itemName: "三级", id: "2" },
      ],
      /*协作单位*/
      collaborDialog: false,
      collaborData: [],
    };
  },
  created() {
    /*存储拷贝的原初始化fromDate数据*/
    this.tableParam = {
      ...this.tableParam,
      supplierName: "",
      enable: "",
      supplierTypeId: "",
    };
    this.gettableData();
  },
  /*
   *copy(data)深拷贝数据,返回拷贝完的数据
   *gettableData获取列表数据
   *load下载
   *SortNum保持序列号
   * UpdateOrDelete禁用，启用，删除
   * submitFromDate保存更新数据
   */
  methods: {
    init() {
      /*重置数据*/
      this.tableParam.supplierName = "";
      this.tableParam.enable = "";
      this.tableParam.supplierTypeId = "";
      this.gettableData();
    },
    /*协作单位*/
    chengecollabor(low) {
      this.id = low.id;
      this.collaborData = [];
      if (low.assists) {
        this.collaborData = JSON.parse(low.assists);
      }
      this.collaborDialog = true;
    },
    updateDate(low, type) {
      if (type == 1) {
        this.$confirm(`此操作将通过该申请?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          cancelButtonClass: "bottom_all_two",
          confirmButtonClass: "bottom_all",
          type: "warning",
        })
          .then(() => {
            low.authStatus = type;
            saveOrUpdate(low).then(() => {
              this.gettableData();
            });
            console.log(low);
          })
          .catch(() => { });
      } else {
        this.$prompt("请输入拒绝该申请得意见", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          cancelButtonClass: "bottom_all_two",
          confirmButtonClass: "bottom_all",
        })
          .then(({ value }) => {
            low.authStatus = type;
            low.remark = value;
            saveOrUpdate(low).then(() => {
              this.gettableData();
            });
            console.log(low);
          })
          .catch(() => { });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.title-title {
  @include discen_al;
  justify-content: space-between;
  font-size: 16px;
  font-weight: bold;
  color: #000000;
  line-height: 40px;
  .color {
    color: $bg_color;
  }
}
.el-radio {
  line-height: 45px;
}
.dialoginfo-title {
  display: flex;
  align-items: center;
  height: 50px;
  > div {
    width: 4px;
    height: 20px;
    background: $bg_color;
  }
  > span {
    padding-left: 10px;
    font-size: 20px;
    color: $bg_color;
    font-weight: 600;
  }
}
.table_link {
  margin-left: 10px;
  color: $bg_color;
}

.table_link:hover {
  opacity: 0.7;
}
.el-input,
.el-select {
  width: 200px;
}
.dialoginfo {
  .el-input,
  .el-select {
    width: 280px;
  }
}
.dialogOtherinfo {
  .el-input,
  .el-select {
    width: 310px;
  }
}
.checkcycdialoginfo {
  .el-input {
    width: 100px;
  }
  .el-select {
    width: 100px;
    margin-right: 20px;
  }
  .text {
    padding: 10px;
  }
}
</style>
